const ACTIVE = "active";

function hasClass(el, cls) {
  cls = cls || "";
  if (cls.replace(/\s/g, "").length == 0) return false; // 当cls没有参数时，返回false
  return new RegExp(" " + cls + " ").test(" " + el.className + " ");
}

// 添加样式
function addClass(el, cls) {
  if (!hasClass(el, cls)) {
    el.className = el.className == "" ? cls : el.className + " " + cls;
  }
}

// 删除样式
function removeClass(el, cls) {
  if (hasClass(el, cls)) {
    var newClass = " " + el.className.replace(/[\t\r\n]/g, "") + " ";
    while (newClass.indexOf(" " + cls + " ") >= 0) {
      newClass = newClass.replace(" " + cls + " ", " ");
    }
    el.className = newClass.replace(/^\s+|\s+$/g, "");
  }
}

class Tab {
  constructor(id) {
    this.el = document.querySelector(id);
    this.addEl = document.querySelector("#add");
    this.ul = this.el.querySelector('ul')
    this.art = this.el.querySelector('article')
    
    this.addEl.onclick = this.add.bind(this);

    this.init();
  }
  // 初始
  init() {
    this.queryNode();

    // 给li\span.remove添加事件
    for (let i = 0; i < this.lis.length; i++) {
      // this.lis[i].index = i;
      this.lis[i].onclick = this.taggle.bind(this, i);
      this.removes[i].onclick = this.remove.bind(this, i, this.removes[i]);
      this.tits[i].ondblclick = this.edit.bind(this, i, this.tits[i])
    }

    
  }

  // 获取节点
  queryNode() {
    this.lis = this.el.querySelectorAll("li");
    this.tits = this.el.querySelectorAll(".tit");
    this.removes = this.el.querySelectorAll(".remove");
    this.sections = this.el.querySelectorAll("section");
  }

  // 清除节点的类名
  clearClass() {
    
  }

  // 切换
  taggle(index) {
    console.log(22222, index)
    for (let i = 0; i < this.lis.length; i++) {
      if (index !== i) {
        removeClass(this.lis[i], ACTIVE);
        removeClass(this.sections[i], ACTIVE);
      }
    }
    addClass(this.lis[index], ACTIVE);
    addClass(this.sections[index], ACTIVE);
  }

  // 添加
  add() {
    const length = this.lis.length;
    // (1) 创建类元素
    const li = `
      <li>
        tab-${length+1}
        <span class="remove">x</span>
      </li>
    `;
    const section = `
      <section>内容${length+1}</section>
    `
    // (2) 追加元素
    this.ul.insertAdjacentHTML('beforeend', li)
    this.art.insertAdjacentHTML('beforeend', section)
    
    this.queryNode();
    this.init();
  }

  // 移除
  remove(index, self) {
    // const index = this.parentNode.index;

    var e = window.event || e;
    e.stopPropagation();

    window.event? window.event.cancelBubble = true : e.stopPropagation();

    const li = this.lis[index];
    const section = this.sections[index];

    li.onclick = null;
    self.onclick = null;

    // 当我们删除了当前选中的li
    const pre = index - 1;
    const next = index + 1;
    this.lis[pre] && this.lis[pre].click()
    if (hasClass(li, ACTIVE)) {
      if (index === 0) {
        this.lis[next] && this.lis[next].click()
      } else {
        this.lis[pre] && this.lis[pre].click()
      }
      
    }
    
    this.ul.removeChild(li)
    this.art.removeChild(section)

    return;

  }

  // 编辑
  edit(index, self) {
    console.log(index)
    // 禁止双击选中文字
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
    const str = self.innerHTML;


    self.innerHTML = `<input value="${str}">`;
    var input = self.children[0];
    input.select(); // 文本框里面的文字处于选中状态
    input.onblur = function() {
      var value = this.value;
      this.parentNode.innerHTML = value;
    }
    // 按回车健调用blur
    input.onkeyup = function(e) {
      if (e.keyCode === 13) {
        this.blur()
      }
    }


  }
}

new Tab("#tab");
